import type {Meta, StoryObj} from '@storybook/react'
import {fn} from '@storybook/test'
import {Button} from './Button'

const meta = {
	title: '通用/Button',
	component: Button,
	parameters: {
		layout: 'centered'
	},
	tags: ['autodocs'],
	// More on argTypes: https://storybook.js.org/docs/api/argtypes
	argTypes: {
		backgroundColor: {control: 'color'}
	},
	// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
	args: {onClick: fn()}
} satisfies Meta<typeof Button>

export default meta
type Story = StoryObj<typeof meta>

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
	args: {
		primary: true,
		label: 'Button'
	}
}

export const Secondary: Story = {
	args: {
		label: 'Button'
	}
}

export const Large: Story = {
	args: {
		size: 'large',
		label: 'Button'
	}
}

export const Small: Story = {
	args: {
		size: 'small',
		label: 'Button'
	}
}
